(function () {
  const listEl = document.querySelector(".list");

  function cloneListFirstElement() {
    const firstEl = listEl.children[0];
    listEl.appendChild(firstEl.cloneNode(true));
  }

  cloneListFirstElement();

  const duration = 2000;
  const itemHeight = parseInt(getComputedStyle(listEl.children[0]).height);
  let curIndex = 0;
  setInterval(next, duration);
  function next() {
    let from = itemHeight * curIndex;
    curIndex++;
    const to = itemHeight * curIndex;

    const totalDuration = 300;
    const duration = 10;
    const times = totalDuration / duration;
    const dis = (to - from) / times;
    let tiemr = setInterval(() => {
      from += dis;
      if (from >= to) {
        clearInterval(tiemr);
        if (curIndex === listEl.children.length - 1) {
          from = 0;
          curIndex = 0;
        }
      }

      listEl.scrollTop = from;
    }, times);
  }
})();
